<div class="custom">

    <h1>
        类目管理
    </h1>

    <div class="row">

        <div class="col-md-6">

            <div class="btn-group btn-group-sm" role="group" aria-label="...">
                <a href="" ng-click="showAddView(0);">add+</a>
            </div>

            <div class="list-group ">
                <li  href="" class="list-group-item" ng-class="{'active':item.active}" ng-repeat="item in dataSource[0]" ng-click="clickCat(1,$index);">
                    <a class="badge" ng-click="showUpdateView(0,$index)">update</a>
                    <a class="badge" ng-click="doDeleteItem(0,$index);">delete</a>
                    <img ng-src="{{item.imageUrl}}" width="15" style="vertical-align: middle">
                    {{item.name}}
                </li>
            </div>

        </div>

        <div class="col-md-6">

            <div class="btn-group btn-group-sm" role="group" aria-label="...">
                <a href="" ng-click="showAddView(1);">add+</a>
            </div>

            <div class="list-group ">
                <li href="" class="list-group-item" ng-class="{'active':item.active}" ng-repeat="item in dataSource[1]" ng-click="clickCat(2,$index);">
                    <a class="badge" ng-click="showUpdateView(1,$index)">update</a>
                    <a class="badge"  ng-click="doDeleteItem(1,$index);">delete</a>
                    <a ng-class="{true: 'btn-green', false: 'badge'}[item.webShow=='1']"  ng-click="doShowItem(item.categoryId,item.webShow);">show</a>
                    <img ng-src="{{item.imageUrl}}" width="15" style="vertical-align: middle">
                    {{item.name}}
                </li>
            </div>

        </div>

    </div>

</div>

<div class="slider_right {{ data.isShowAddView ? 'active' : 'default' }} panel panel-default" style="background-color: white;">

    <div class="panel-heading">
        <button class="btn btn-xs" ng-click="data.isShowAddView = false">关闭</button>
        新增类目
    </div>

    <form name="myForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">图片</label>
            <div class="col-sm-9">
                <input type="file" ngf-select="" ng-model="pic" name="file" ngf-accept="'image/*'" required="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> <img ngf-src="pic" class="thumb" style="width: 160px;"></label>
            <div class="col-sm-9">
                <button ng-disabled="!myForm.$valid" ng-click="uploadPic(pic)">上传图片</button>
                <span class="progress" ng-show="picFile.progress >= 0">
                  <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'" class="ng-binding"></div>
              </span>
            </div>
        </div>
    </form>
    <form class="panel-body">

        <div class="form-group" hidden>
            <label>类目级别</label>
            <input type="text" class="form-control" ng-model="newItem.level"  placeholder="类目类别" readonly>
        </div>
        <div class="form-group">
            <label>名称</label>
            <input type="text" class="form-control" ng-model="newItem.name" placeholder="名称">
        </div>
        <div class="form-group" hidden>
            <label >父类目id</label>
            <input type="text" class="form-control" ng-model="newItem.parentId" readonly>
        </div>
        <button type="button" class="btn btn-default" ng-click="doAddItem();">提交</button>

    </form>

</div>

<div class="slider_right {{ data.isShowUpdateView ? 'active' : 'default' }} panel panel-default" style="background-color: white;">

    <div class="panel-heading">
        <button class="btn btn-xs" ng-click="data.isShowUpdateView = !data.isShowUpdateView">关闭</button>
        更新类目
    </div>

    <form name="myForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">图片</label>
            <div class="col-sm-9">
                <input type="file" ngf-select="" ng-model="pic" name="file" ngf-accept="'image/*'" required="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"> <img ngf-src="pic" class="thumb" style="width: 160px;"></label>
            <div class="col-sm-9">
                <button ng-disabled="!myForm.$valid" ng-click="uploadPic(pic)">上传图片</button>
                <span class="progress" ng-show="picFile.progress >= 0">
                  <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'" class="ng-binding"></div>
              </span>
            </div>
        </div>
    </form>

    <form class="panel-body">

        <div class="form-group" hidden>
            <label>类目id</label>
            <input type="text" class="form-control" ng-model="updateItem.categoryId" placeholder="类目类别" readonly>
        </div>

        <div class="form-group" hidden>
            <label>类目级别</label>
            <input type="text" class="form-control" ng-model="updateItem.level" placeholder="类目类别" readonly>
        </div>

        <div class="form-group">
            <label>名称</label>
            <input type="text" class="form-control" ng-model="updateItem.name" placeholder="名称">
        </div>

        <div class="form-group" hidden>
            <label >父类目id</label>
            <input type="text" class="form-control" ng-model="updateItem.parentId" readonly>
        </div>

        <button type="button" class="btn btn-default" ng-click="doUpdateItem();">提交</button>

    </form>

</div>
